<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="0" class="mt10">
                <Col class="mb10" :lg="11" :md="11" :sm="24" :xs="24">
                    <Card>
                        <Card title="修改头像">
                            <Upload :on-success="uploadSuccess"
                                    :on-error='uploadError'
                                    :on-exceeded-size='uploadSizeForBig'
                                    :max-size="4096"
                                    :action="uploadUrl">
                                <!--                            <Button icon="ios-cloud-upload-outline">Upload files</Button>-->
                                <Avatar shape="circle" type="button" icon="ios-person" size="100" :src="avatarUrl"/>
                            </Upload>
                        </Card>
                        <br>
                        <br>

                        <Card title="个人资料">
                            <Form ref="editUserNews" :model="editUserNews" :rules="ruleUserNews"
                                  :label-width="80">
                                <FormItem label="E-mail" prop="email">
                                    <Input type="text" v-model="editUserNews.email"></Input>
                                </FormItem>
                                <FormItem label="QQ" prop="QQ">
                                    <Input type="text" v-model="editUserNews.QQ"></Input>
                                </FormItem>
                                <FormItem label="个人简介" prop="introduction">
                                    <Input type="textarea" v-model="editUserNews.introduction"></Input>
                                </FormItem>

                                <FormItem>
                                    <Button type="primary" @click="userNewsHandleSubmit()">修改</Button>
                                    <Button @click="userNewsHandleReset()" style="margin-left: 8px">重置
                                    </Button>
                                </FormItem>
                            </Form>
                        </Card>
                    </Card>
                </Col>
                <Col class="mb10" :lg="11" :md="11" :sm="24" :xs="24">
                    <Card title="修改密码">
                        <Form ref="changePassword" :model="changePassword" :rules="rulePassword" :label-width="80">
                            <FormItem label="旧密码" prop="oldPassword">
                                <Input type="password" v-model="changePassword.oldPassword"></Input>
                            </FormItem>
                            <FormItem label="新密码" prop="newPassword">
                                <Input type="password" v-model="changePassword.newPassword"></Input>
                            </FormItem>
                            <FormItem label="新密码" prop="newPasswdCheck">
                                <Input type="password" v-model="changePassword.newPasswdCheck"></Input>
                            </FormItem>

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('changePassword')">Submit</Button>
                                <Button @click="handleReset('changePassword')" style="margin-left: 8px">Reset</Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.changePassword.newPasswdCheck!== '') {
                        // 对第二个密码框单独验证
                        this.$refs.changePassword.validateField('newPasswdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入新密码！'));
                } else if (value !== this.changePassword.newPassword) {
                    callback(new Error('两次密码不一致！'));
                } else {
                    callback();
                }
            };
            const validateOldPassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入旧密码！'));
                } else {
                    callback();
                }
            };


            return {
                // 做用户头像回显参数
                avatarUrl: '',
                //头像上传地址
                uploadUrl: '//jsonplaceholder.typicode.com/posts/',
                //修改密码数据
                changePassword: {
                    oldPassword: '',
                    newPassword: '',
                    newPasswdCheck: ''
                },
                //修改用户信息的对象
                editUserNews: {
                    email: '',
                    QQ: '',
                    // 个人简介
                    introduction: '',

                },
                //修改密码的校验规则
                rulePassword: {
                    oldPassword: [
                        {validator: validateOldPassword, trigger: 'blur'}
                    ],
                    newPassword: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    newPasswdCheck: [
                        {validator: validatePassCheck, trigger: 'blur'}
                    ],

                },
                // 修改个人信息的校验规则
                ruleUserNews: {
                    email: [
                        {required: true, message: '邮箱不能为空', trigger: 'blur'},
                        {type: 'email', message: '请输入正确格式的邮箱', trigger: 'blur'}
                    ],
                    QQ: [
                        {required: true, message: 'QQ不能为空', trigger: 'blur'},
                    ],
                    introduction: [
                        {required: true, message: '个人简介不能为空', trigger: 'blur'},
                    ]
                }
            };


        },
        methods: {
            //修改密码
            handleSubmit() {
                this.$refs.changePassword.validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            // 重置密码
            handleReset() {
                this.$refs.changePassword.resetFields();
            },

            // 上传组件
            uploadSuccess() {
                this.$Message.success('上传成功')
                this.avatarUrl = 'https://i.loli.net/2017/08/21/599a521472424.jpg';

            },
            uploadError() {
                this.$Message.error('上传失败');
            },
            uploadSizeForBig() {
                this.$Message.error('上传图片过大，请重新选择');
            },
            //修改个人信息的提交方法
            userNewsHandleSubmit() {
                this.$refs.editUserNews.validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            userNewsHandleReset() {
                this.$refs.editUserNews.resetFields();
            }
        }


    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
        text-align: center;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {

        span.num {
            font-size: 30px;
        }

    }
</style>
